<template>
  <div class="man_note">
    <div class="title">
      <div>管理用户</div>
    </div>

    <!-- 核心内容区 -->
    <br>

    <el-table :data="all_users.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe
      style="width: 100%; max-height: 700px; overflow: scroll;" @selection-change="handleSelectionChange"
      class="table_scrollbar">

      <!-- 多选功能 -->
      <el-table-column type="selection" width="55">
      </el-table-column>

      <!-- 基本内容 -->
      <!-- user_name -->
      <el-table-column prop="userName" label="用户名" width="120">
      </el-table-column>

      <!-- user_signature -->
      <el-table-column prop="signature" label="个性签名" width="150">
        <template v-slot="scope">
          {{ scope.row.signature.slice(0, 10) }}·····
        </template>
      </el-table-column>

      <!-- user_avatar -->
      <el-table-column prop="profile" label="用户头像" width="170">
        <template v-slot="scope">
          <img :src="scope.row.profile" alt="" style="width:80px;height: 80px; border-radius: 8px;">
        </template>
      </el-table-column>

      <!-- user_role -->
      <el-table-column prop="accountCategory" label="权限" width="120">
        <template v-slot="scope">
          <el-tag type="warning">{{ scope.row.accountCategory }}：普通用户</el-tag>
        </template>
      </el-table-column>

      <!-- user_level -->
      <el-table-column prop="lever" label="等级" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.lever }}</el-tag>
        </template>
      </el-table-column>

      <!-- user_sex -->
      <el-table-column prop="gender" label="性别" width="80">
        <template v-slot="scope">
          <el-tag v-if="scope.row.gender == 1">男</el-tag>
          <el-tag v-else>女</el-tag>
        </template>
      </el-table-column>

      <!-- user_career -->
      <el-table-column prop="fans" label="粉丝" width="80">
        <template v-slot="scope">
          <el-tag>{{ scope.row.fans || "无"  }}</el-tag>
        </template>
      </el-table-column>

      <!-- user_career -->
      <el-table-column prop="fans" label="账号状态" width="80">
        <template v-slot="scope">
          <el-tag type="warning" v-if="scope.row.activationStatus==0">封禁</el-tag>
          <el-tag type="primary" v-else plain>启用</el-tag>
        </template>
      </el-table-column>

      <!-- 功能键-操作区 -->
      <el-table-column prop="address" label="操作">
        <template v-slot="scope">
          <el-button type="warning" plain @click="user_unable(scope.row.userId,0)">封禁</el-button>
          <el-button type="primary" plain @click="user_unable(scope.row.userId,1)">启用</el-button>
        </template>
      </el-table-column>

    </el-table>
    <br>

    <!-- 分页 -->
    <div style="background-color:white; width: 100%; position: fixed; bottom: 6%;z-index: 999;">
      <div class="block">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[2, 4, 6, 8, 10]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="all_users.length">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { load_common_user_infoAPI, change_account_status_by_idAPI } from '@/api/admin';
export default {
  data() {
    return {
      // 所有用户数据
      all_users: [
        {
          "userId": 4826,
          "nickName": "admin",
          "userName": "admin",
          "password": "e10adc3949ba59abbe56e057f20f883e",
          "profile": "http://localhost:9999/images/profiles/1711722631226-头像.png",
          "backgroundImage": "http://localhost:9999/images/background_image/default.jpg",
          "signature": "这个人很神秘，什么也没有留下",
          "gender": 1,
          "address": "银河区地球村",
          "fans": "帅哥彬",
          "listenTime": 2819,
          "lever": 1,
          "createTime": 1710576011000,
          "activationStatus": 1,
          "accountCategory": 0,
          "avatarId": 0,
          "metaUniverseId": 0
        }
      ],
      // 当前页码
      currentPage: 1,
      // 当前选择的每页多少条数据，来自:page-size里面数组选择项变化，触发的handleSizeChange()
      pageSize: 4,
      // 多选
      multipleSelection: [],
    }
  },
  mounted() {
    this.getAllUsers();
  },
  methods: {
    // 获取所有用户数据 http://localhost:3000/user_admin/getAllUsers
    getAllUsers() {
      load_common_user_infoAPI().then(res => {
        // 存储所有用户
        this.all_users = res.data
      }).catch(err => {console.log(err);})
    },
    // 修改用户状态
    user_unable (userId, isUnable) {
      change_account_status_by_idAPI({userId,isUnable}).then(res=>{
        console.log(res.data)
        this.all_users.forEach((item,index)=>{
          if (item.userId == userId) {
            item.activationStatus = isUnable
          }
        })
      }).catch(e=>{console.log(e)})
    },

    // 修改每页多少条数据
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val;
    },

    // 当前页编号
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val;
    },

    // 多选功能
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(val)
    },
  }
}
</script>

<style lang="less" scoped>
.man_note {
  width: 98%;
  height: 98%;
  background-color: white;
  border-radius: 20px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-top: 10px;
  padding-left: 20px;
  // padding-bottom: 240px;
  overflow: scroll;
}

.man_note::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.title {
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  align-items: center;
  position: relative;
  height: 32px;
  font-size: 24px;
  // margin-top: 10px;
  // margin-left: 20px;
  padding-left: 12px;
}

.title::before {
  position: absolute;
  left: 0px;
  width: 5px;
  top: 4px;
  bottom: 4px;
  background-color: rgb(58, 100, 255);
  content: "";
  border-radius: 16px;
}
</style>